<template>
  <div class="ccc">
    <div class="cart">
      <div class="top">
        <div class="title">购物车</div>
        <div class="detail-top">
          <div class="good-top">全部(20)</div>
          <div class="good-top">降价(4)</div>
          <div class="good-top">常卖</div>
          <div class="good-top">分类</div>
        </div>
      </div>
      <div class="aaa">
        <div class="rep">
          <div class="xiaoU">
            <div class="xiaoUl">
              <input type="radio" name id />小U自营
            </div>
            <div class="xiaoUr">
              <span>已免运费</span>
              <span>|</span>
              <span>领券</span>
            </div>
          </div>
          <div class="shopping-content">
            <div class="shopping-box" v-for="(item) in goods" :key="item.id">
              <input type="checkbox" v-model="item.checked" @change="changeOne" />
              <img :src="$pregImg+`${item.img}`" alt />
              <div class="shopping-r">
                <p>
                  {{item.goodsname}}
                  <van-button type="danger" @click="del(item.id)">删除</van-button>
                </p>

                <p>{{item.price}}</p>
                <span class="pink">
                  {{item.price}}
                  <i class="iconfont icon-xiajiantou"></i>
                </span>
                <p>比加入时降低￥{{(123-item.price) }}</p>
                <div class="shopping-b">
                  <div class="b-l">
                    <span>
                      <b>&yen;</b>
                      {{item.price }}
                    </span>
                    <span>￥{{123.00 }}</span>
                  </div>

                  <div class="b-r">
                    <span @click="reduce(item.id)">-</span>
                    <span>{{item.num}}</span>
                    <span @click="add(item.id)">+</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="all-box">
        <div class="all-l">
          <input type="checkbox" v-model="checkedAll" @change="changeAll" />
          <label for>全选</label>
        </div>
        <div class="total">
          <span>合计</span>
          <span>已免运费</span>
        </div>
        <div class="all-money">
          <span>&yen;{{total.toFixed(2) }}</span>
          <span>已优惠&yen;{{discount.toFixed(2) }}元</span>
        </div>
        <div class="sum-money" @click="pay">结算</div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapActions, mapGetters } from "vuex";
import { Toast } from "vant";
export default {
  data() {
    return {
      checkedAll: false
    };
  },
  methods: {
    ...mapActions({
      requestcart: "cart/cartActions",
      changecart: "cart/changeCartActions",
      delcart: "cart/delActions",
      addorder: "order/addActions",
      countmoneychange: "order/countmoneyActions"
    }),
    reduce(id) {
      let obj = {
        id: id,
        type: 1
      };
      let a = this.goods.filter(item => item.id == id);
      // console.log(a[0].num);
      if (a[0].num <= 1) {
        Toast("数量不能小于一个");
        return;
      } else {
        this.changecart(obj);
      }
    },
    add(id) {
      // this.goods[index].num++;
      // console.log(id);
      let obj = {
        id: id,
        type: 2
      };
      this.changecart(obj);
    },
    del(id) {
      this.delcart(id);
    },
    pay() {
      let a = this.goods.filter(item => item.checked);
      a.map(item => (countnumber += item.num));
      console.log(a);
      let countnumber = "";
      a.map(item => (countnumber += item.num));
      let addtime = new Date().getTime();
      let arr = [];
      a.map(item => arr.push(item.id));
      let idstr = arr.join(",");
      a.forEach(item =>{
        item.addtime = addtime,
        item.countmoney = this.total,
        item.idstr = idstr,
        item.countnumber = countnumber
      }
        
      );
      console.log(a);
      // ((item.countmoney = this.total))(
      //     (item.countnumber = countnumber)
      //   )((item.idstr = idstr))
      // let countmoney = this.total;

      // a=JSON.stringify(a)
      // let aa=a.map(item=>item.id)
      // // console.log(aa);
      if(a.length==0){
        Toast('请选择一个商品')
        return
      }
      this.$router.push(`/order?goods=${JSON.stringify(a)}`);

      //   let addtime = new Date().getTime();
      //   let uid = JSON.parse(sessionStorage.getItem("user")).uid;
      //   let countmoney = this.total;
      //   let countnumber = "";
      //   let arr = [];
      //    let a = this.goods.filter(item => item.checked);
      //   a.map(item => arr.push(item.id));
      //   // console.log(arr);
      //   let aaa = arr.join(",");
      //   // console.log(aaa);
      //   let idstr=aaa
      //   // // this.countmoneychange(this.total)

      //   // let a = this.goods.filter(item => item.checked);
      //   // console.log(a);
      //   a.map(item => (countnumber += item.num));
      //   a.forEach(item => {
      //     (item.uid = uid), (item.countmoney = countmoney);
      //     item.countnumber = countnumber;
      //     item.addtime = addtime;
      //     item.idstr=idstr
      //   });

      //   console.log(a);
      //   //  console.log(addtime,uid,countmoney,countnumber);
      //   // this.$router.push('/order')
      //   // this.addorder(a)
    },
    changeAll() {
      this.goods.map(item => {
        item.checked = this.checkedAll;
      });
    },
    changeOne() {
      this.checkedAll = this.goods.every(item => item.checked == true);
    }
  },
  computed: {
    total() {
      let sum = 0;
      this.goods.map(item => {
        if (item.checked) {
          sum += item.price * item.num;
        }
      });
      return sum;
    },
    discount() {
      let disNum = 0;
      this.goods.map(item => {
        if (item.checked) {
          disNum += (100 - item.price) * item.num;
        }
      });
      return disNum;
    },
    ...mapGetters({
      goods: "cart/goods"
    })
  },
  mounted() {
    // let uid = JSON.parse(sessionStorage.getItem("user")).uid;
    // console.log(uid);
    this.requestcart(JSON.parse(sessionStorage.getItem("user")).uid);
    // console.log(JSON.parse(sessionStorage.getItem("user")).uid);
    // console.log(uid);
    // console.log(this.goods);
  },
  // filters: {
  //   priceFilter(e) {
  //     return e.toFixed(2);
  //   }
  // }
};
</script>

<style scoped>
.van-button {
  padding: 0;
  margin: 0;
  height: 20px;
}
.ccc {
  background-color: #efefef;
  padding-bottom: 0.1rem;
}
.cart {
  background-color: #efefef;
}
.top {
  background-image: linear-gradient(180deg, #ff6040 0%, #ff8a80 100%);
}
.title {
  text-align: center;
  font-size: 0.16rem;
  color: #fff;
}
.detail-top {
  margin: 0 auto;
  width: 100%;
  height: 0.32rem;
  display: flex;
}
.good-top {
  height: 0.32rem;
  flex: 1;
  text-align: center;
  line-height: 0.32rem;
  color: #fff;
  font-size: 0.14rem;
}
.detail-top .good-top:nth-of-type(1) {
  font-weight: 600;
  font-size: 0.16rem;
}
.xiaoU {
  height: 0.3rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  margin-bottom: 0.1rem;
}
.xiaoUl input {
  width: 0.14rem;
  height: 0.14rem;
}
.xiaoUl {
  padding-left: 0.1rem;
  display: flex;
  align-items: center;
}
.xiaoUr {
  padding-right: 0.14rem;
}
.aaa {
  margin-bottom: 1.09rem;
  background-color: #efefef;
}
.rep {
  margin-bottom: 0.1rem;
}
.shopping-content {
  background-color: #efefef;
  margin: 0 auto;
  width: 100%;
  margin-bottom: 0.1rem;
}
.shopping-box {
  width: 100%;
  height: 1.28rem;
  background-color: #fff;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}
.shopping-box input {
  width: 0.14rem;
  height: 0.14rem;
}
.shopping-box img {
  width: 1.08rem;
  height: 1.08rem;
  margin-left: 0.11rem;
}
.shopping-box .shopping-r {
  width: 2.16rem;
  height: 1.08rem;
  margin-left: 0.15rem;
}
.shopping-r {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.shopping-r p:nth-of-type(1) {
  font-size: 0.16rem;
  color: #333333;
}
.shopping-r p:nth-of-type(2) {
  font-size: 0.14rem;
  color: #999;
  margin-bottom: 0.05rem;
}
.shopping-r .pink {
  background-color: #f2f2f2;
  width: 0.74rem;
  height: 0.16rem;
  text-align: center;
  line-height: 0.16rem;
}
.shopping-r span:nth-child(3) i {
  font-size: 12px;
}
.shopping-r p:nth-of-type(3) {
  color: #ff6040;
}
.shopping-b {
  display: flex;
  justify-content: space-between;
}
.shopping-b .b-l span:nth-of-type(1) {
  color: #ff6040;
  font-size: 0.2rem;
}
.shopping-b .b-l b {
  font-size: 0.12rem;
}
.shopping-b .b-l span:nth-of-type(2) {
  color: #999999;
  text-decoration: line-through;
}
.shopping-b .b-r {
  display: flex;
  align-items: center;
  font-size: 0.16rem;
}
.shopping-b .b-r span:nth-of-type(2) {
  width: 0.4rem;
  height: 0.2rem;
  background-color: #f2f2f2;
  text-align: center;
  line-height: 0.2rem;
}
.stwo {
  margin-bottom: 1.2rem;
}
.all-box {
  margin: 0 auto;
  width: 100%;
  background-color: #fff;
  display: flex;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0.49rem;
  height: 0.49rem;
  align-items: center;
  border-top: 1px solid #cccccc;
  border-bottom: 1px solid #cccccc;
}
.all-box input {
  margin-left: 0.11rem;
  margin-right: 0.11rem;
  width: 0.16rem;
  height: 0.16rem;
}
.all-box .all-l {
  font-size: 0.16rem;
  color: #333;
  font-weight: 600;
  flex: 2;
}
.all-box .total {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex: 1;
}
.all-box .total span:nth-of-type(1) {
  font-size: 0.16rem;
  font-weight: 600;
}
.all-box .total span:nth-of-type(2) {
  color: #999;
}
.all-money {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex: 2;
}
.all-money span:nth-of-type(1) {
  font-size: 0.16rem;
  font-weight: 600;
  color: #ff6040;
}
.all-money span:nth-of-type(2) {
  color: #999;
}
.sum-money {
  width: 1.1rem;
  height: 0.49rem;
  background-color: #ff6040;
  color: #fff;
  text-align: center;
  line-height: 0.49rem;
  font-size: 0.16rem;
  flex: 1;
}
</style>